<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:body>
	<ui:composition template="template/template.xhtml">
		<ui:define name="content">
			<!-- Example code -->
			<script type="text/javascript">
				// Program starts here. Creates a sample graph in the
				// DOM node with the specified ID. This function is invoked
				// from the onLoad event handler of the document (see below).
				window.onready=function() {
					main(document.getElementById('graphContainer'));
				};

				function main(container) {
					// Checks if the browser is supported
					if (!mxClient.isBrowserSupported()) {
						mxUtils.error('Browser is not supported!', 200, false);
					} else {
						// Creates the graph inside the given container
						var graph = new mxGraph(container);

						// Enables rubberband selection
						new mxRubberband(graph);

						// Gets the default parent for inserting new cells. This
						// is normally the first child of the root (ie. layer 0).
						var parent = graph.getDefaultParent();

						// Adds cells to the model in a single step
						graph.getModel().beginUpdate();
						try {
							var v1 = graph.insertVertex(parent, null, 'Hello,',
									20, 20, 80, 30);
							var v2 = graph.insertVertex(parent, null, 'World!',
									200, 150, 80, 30);
							var e1 = graph.insertEdge(parent, null, '', v1, v2);
						} finally {
							// Updates the display
							graph.getModel().endUpdate();
						}
					}
				};
			</script>
			
			#{gestionArbre.rafraichirArbre()}
			<h:form id="form">
				<!-- Creates a container for the graph with a grid wallpaper -->
				

				<table class="tableauHome" cellspacing="0px;">
					<tr valign="top">
						<td class="celluleAvecBordure celluleMenu"><p:panel
								header="Projetc Explorer"
								styleClass="titre2 tableauSansBordures">
								<p:tree value="#{vueHome.arbre}" var="node" id="tree"
									styleClass="celluleArbre">
									<p:treeNode id="treeNode">
										<h:outputText value="#{node.libelle}" id="lblNode" />
									</p:treeNode>
								</p:tree>
							</p:panel></td>
						<td class="celluleAvecBordure">
							<div id="graphContainer">
							</div>
						</td>
					</tr>
					<tr valign="top">
						<td class="celluleAvecBordure celluleProprietes"><p:panel
								header="Properties" styleClass="titre2 tableauSansBordures">

							</p:panel></td>
						<td class="celluleAvecBordure">LOG et Graphe
							<h3>ddddddddddd</h3>
						</td>
					</tr>
				</table>
			</h:form>

		</ui:define>
	</ui:composition>
</h:body>
</html>